<template>
<div id="app">
      <div class="left">
        <span :class="{colorful:chIndex==index}" @click="change(index)" v-for="(item,index) in tabs" :key="index">{{item.tabname}}</span>
      </div>
      <div>
        <div class="right" v-for="(item,index) in tabs[chIndex].list" :key=index>
        <img :src="item.pic" alt="">
        <div class="introduce">
          <h3>{{item.name}}</h3>
          <span>￥{{item.price}}</span>
        </div>
      </div>
      </div>
</div>
</template>

<script>

import pic1 from './assets/a.png'
import pic2 from './assets/b.png'
import pic3 from './assets/c.png'

export default {
  data(){
    return{
      chIndex:0,
      tabs:[
        {
          tabname:'三文鱼',
          list:[
            {pic:pic1,name:'普通三文鱼',price:'45'},
            {pic:pic1,name:'黄金三文鱼',price:'90'},
            {pic:pic1,name:'钻石三文鱼',price:'199'}
          ]
        },
        {
          tabname:'刺身',
          list:[
            {pic:pic2,name:'普通刺身',price:'50'},
            {pic:pic2,name:'黄金刺身',price:'99'},
            {pic:pic2,name:'钻石刺身',price:'219'}
          ]
        },
        {
          tabname:'龙虾',
          list:[
            {pic:pic3,name:'普通龙虾',price:'60'},
            {pic:pic3,name:'黄金龙虾',price:'169'},
            {pic:pic3,name:'钻石龙虾',price:'319'}
          ]
        }
      ]
    }
  },
  methods:{
    change(index){
      this.chIndex=index
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app{
  display: flex;
}
.left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20vw;
  height: 50vw;
  // background: red;

}
.right{
  display: flex;
  width: 75vw;
  height: 30vw;
  // background: yellow;
}
.right img{
  width: 30vw;
  height: 30vw;
  margin-right: 2vw;
}
.right span{
  color: red;
}
.right div{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.colorful{
  font-weight: bolder;
}
</style>
